<template>
    <h3>Child2</h3>
    <p>{{ title }} {{ age }} </p>
    <p v-for="(item, index) of arrNames" :key="index">{{ item }}</p>
    <button @click="updateData">修改数据</button>
    <p>{{ onEvent("我是子级") }}</p>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    //props里的属性是只读的
    props: {
        //数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值
        title: { type: [String, Number, Array, Object], required: true }, //required：如果父级没传该字段，浏览器控制台会报警告：Missing required prop: "title"  
        age: { type: Number, default: 0 }, //改成别的类型，浏览器控制台会警告
        msg: { type: String },
        arrNames: { type: Array, default: () => ["空"] },

        onEvent: Function,//事件
    },
    methods: {
        updateData() {
            //props里的属性是只读的，不允许修改父元素传递过来的数据
            console.log(this.title);
            this.title = '新数据';//这里浏览器控制台会报错
        }
    }
}
</script>